<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2.0.6/css/pico.css">
    <script src="https://unpkg.com/axios@1.7.2/dist/axios.min.js"></script>
    <title>会员积分商城 - 商品展示</title>
    <style>
        /* 轮播图样式 */
        .carousel {
            position: relative;
            width: 100%;
            max-width: 600px; /* 适当放大 */
            height: 300px; /* 适当放大 */
            overflow: hidden;
            margin: 0 auto 20px;
        }

        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .carousel img {
            width: 50%;
            height: 100%;
            object-fit: contain; /* 保持原始比例 */
        }

        .carousel-controls {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
        }

        .carousel-controls button {
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
        }

        .modal img {
            max-width: 90%;
            max-height: 80%;
        }

        .modal.show {
            display: flex;
        }

        .modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: #fff;
            border: none;
            padding: 5px;
            border-radius: 50%;
            cursor: pointer;
        }

        /* 按钮容器样式 */
        .button-container {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 10px;
        }

        /* 左上角按钮样式 */
        .top-left-button {
            position: absolute;
            top: 20px;
            left: 20px;
        }

        /* 页面布局调整 */
        .container {
            position: relative;
            padding-top: 100px;
        }

        /* 标题样式 */
        .page-title {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            font-weight: bold;
            color: #000; /* 修改为黑色 */
        }

        /* 表格样式优化 */
        .table {
            font-size: 14px;
            background-color: transparent; /* 表格背景透明 */
        }

        .table td, .table th {
            padding: 12px;
            vertical-align: middle;
            background-color: rgba(255, 255, 255, 0); /* 单元格半透明背景 */
            color: #000; /* 文字颜色 */
        }

        .table img {
            cursor: pointer;
        }

        /* 添加背景图 */
        body {
            background-image: url('img_13.png');
            background-size: cover;
            background-position: center;
            min-height: 100vh;
        }

        /* 用户积分容器样式 */
        .user-points {
            background-color: rgba(255, 255, 255, 0); /* 半透明背景 */
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            color: #000; /* 文字颜色 */
        }
    </style>
</head>
<body>
<div id="app" class="container-fluid py-5">
    <div class="container">
        <!-- 左上角按钮 -->
        <div class="top-left-button">
            <button @click="goToRedeemableProductList" class="btn btn-primary">可兑换商品列表</button>
        </div>

        <!-- 右上角按钮 -->
        <div class="button-container">
            <button @click="logout" class="btn btn-danger">退出</button>
        </div>

        <!-- 标题 -->
        <h1 class="page-title">全部商品展示</h1>

        <!-- 轮播图 -->
        <div class="carousel">
            <div class="carousel-inner" :style="{ transform: `translateX(-${currentImageIndex * 50}%)` }">
                <img v-for="(item, index) in items" :key="item.id" :src="item.imageUrl || '/images/default-image.png'"
                     alt="商品图片" />
            </div>
            <div class="carousel-controls">
                <button @click="prevImage">上一张</button>
                <button @click="nextImage">下一张</button>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="user-points">
                    <h3>用户积分：{{ userPoints }}</h3>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-md-12">
                <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th scope="col">图片</th>
                        <th scope="col">商品名称</th>
                        <th scope="col">类别</th>
                        <th scope="col">积分</th>
                        <th scope="col">销量</th>
                        <th scope="col">描述</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in items" :key="item.id">
                        <td>
                            <img :src="item.imageUrl || '/images/default-image.png'"
                                 alt="商品图片"
                                 style="width: 50px; height: 50px;"
                                 @click="openModal(item.imageUrl)">
                        </td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.category }}</td>
                        <td>{{ item.price }}</td>
                        <td>{{ item.sales_count }}</td>
                        <td>{{ item.description }}</td>
                    </tr>
                    </tbody>
                </table>
                <nav aria-label="Page navigation" class="mt-3">
                    <ul class="pagination justify-content-center">
                        <li class="page-item" :class="{ disabled: page === 1 }">
                            <button class="page-link" @click="changePage(page - 1)">上一页</button>
                        </li>
                        <li class="page-item" v-for="p in totalPages" :key="p" :class="{ active: p === page }">
                            <button class="page-link" @click="changePage(p)">{{ p }}</button>
                        </li>
                        <li class="page-item" :class="{ disabled: page === totalPages }">
                            <button class="page-link" @click="changePage(page + 1)">下一页</button>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 模态框，点击图片时显示 -->
    <div v-if="isModalVisible" class="modal show" @click="closeModal">
        <button class="modal-close" @click="closeModal">X</button>
        <img :src="modalImageUrl" alt="放大后的商品图片">
    </div>
</div>

<script>
    const App = {
        data() {
            return {
                userId: null,
                userPoints: 0,
                items: [],
                page: 1,
                pageSize: 10,
                totalItems: 0,
                totalPages: 1,
                filters: {
                    category: '',
                    sortBy: 'sales_count',
                },
                isModalVisible: false,
                modalImageUrl: '',
                currentImageIndex: 0,
                carouselInterval: null,
            };
        },
        methods: {
            fetchUserPoints() {
                axios.get(`/api/users/${this.userId}`)
                    .then(response => {
                        this.userPoints = response.data.points;
                    })
                    .catch(error => {
                        console.error("获取用户积分失败：", error);
                    });
            },
            fetchProducts() {
                let url = "/api/products";
                let params = {
                    category: this.filters.category,
                    sortBy: this.filters.sortBy,
                    page: this.page,
                    pageSize: this.pageSize,
                };
                axios.get(url, { params })
                    .then(response => {
                        this.items = response.data.items;
                        this.totalItems = response.data.totalItems;
                        this.totalPages = Math.ceil(this.totalItems / this.pageSize);
                        this.startCarousel();
                    })
                    .catch(error => {
                        console.error("获取商品列表失败：", error);
                    });
            },
            goToRedeemableProductList() {
                window.location.href = `redeemable-product-list.html?userId=${this.userId}`;
            },
            changePage(newPage) {
                if (newPage < 1 || newPage > this.totalPages) return;
                this.page = newPage;
                this.fetchProducts();
            },
            openModal(imageUrl) {
                this.modalImageUrl = imageUrl || '/images/default-image.png';
                this.isModalVisible = true;
            },
            closeModal() {
                this.isModalVisible = false;
            },
            logout() {
                window.location.href = "login.html";
            },
            startCarousel() {
                if (this.carouselInterval) clearInterval(this.carouselInterval);
                this.carouselInterval = setInterval(() => {
                    this.nextImage();
                }, 3000);
            },
            nextImage() {
                this.currentImageIndex = (this.currentImageIndex + 1) % (this.items.length - 1);
            },
            prevImage() {
                this.currentImageIndex = (this.currentImageIndex - 1 + (this.items.length - 1)) % (this.items.length - 1);
            }
        },
        mounted() {
            const urlParams = new URLSearchParams(window.location.search);
            this.userId = urlParams.get('userId');

            if (this.userId) {
                this.fetchUserPoints();
                this.fetchProducts();
            } else {
                alert("用户未登录，请先登录！");
                window.location.href = "login.html";
            }
        },
        beforeUnmount() {
            if (this.carouselInterval) clearInterval(this.carouselInterval);
        }
    };
    const app = Vue.createApp(App);
    app.mount("#app");
</script>
</body>
</html>